<template>
  <div class="login-container">
    <el-form
      class="login-form"
      :model="loginform"
      :rules="loginRules"
      ref="loginform"
    >
      <div class="title-container">
        <h3 class="title">聚德项目管理系统</h3>
      </div>
      <el-form-item prop="username">
        <el-input
          placeholder="请输入邮箱"
          prefix-icon="el-icon-user"
          ref="username"
          v-model="loginform.username"
        ></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          type="password"
          v-model="loginform.password"
        ></el-input>
      </el-form-item>
      <el-row type="flex" justify="space-between" style="margin-bottom: 20px">
        <el-checkbox v-model="loginform.logpass" style="color: #fff"
          >记住密码</el-checkbox
        >
      </el-row>
      <el-button
        type="primary"
        @click="postLogin"
        style="width: 100%; margin-bottom: 30px"
        >登录</el-button
      >
    </el-form>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    var validateMail = (rule, value, callback) => {
      var myreg =
        /^([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      if (!myreg.test(value)) {
        callback(new Error("邮箱格式不正确"));
      }
      callback();
    };
    return {
      loginform: {
        username: "",
        password: "",
        logpass: false,
        captcha: "",
        captchaID: "",
      },
      loginRules: {
        username: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: validateMail, trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    let loginInfo = Cookies.get("loginInfo");
    if (loginInfo) {
      loginInfo = JSON.parse(loginInfo);
      this.loginform = loginInfo;
    }
    this.$refs.username.focus();
  },
  methods: {
   postLogin() {
      // this.$axios.get('user/login',this.loginform).then((res)=>{
      //   console.log(res);
      // }).catch((e)=>{
      //   console.log(e);
      // })
      this.$refs["loginform"].validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("user/login", this.loginform)
            .then(() => {
              //登陆成功
              console.log("login ok");
              // const route=this.$store.state.user.id_role;
              // localStorage.setItem('id_role',route)
              if (!this.loginform["logpass"]) {
                this.loginform["password"] = "";
              }
              Cookies.set("loginInfo", this.loginform);
              this.$store
                .dispatch("user/getInfo")
                .then((res) => {
                  // console.log('getInfo ok')
                  // this.$router.replace({ path: '/' })
                  console.log(res, 222);
                })
                .catch((e) => {
                  // this.$message.error(e)
                  console.log(e, 333);
                });

              this.$router.replace("/");
            })
            .catch((e) => {
              this.$message.error(e);
            });
          // this.$axios
          //   .post("/user/login", this.loginform)
          //   .then((e) => {
          //     if (!this.loginform["logpass"]) {
          //       this.loginform["password"] = "";
          //     }
          //     Cookies.set("loginInfo", this.loginform);
          //     console.log("登录成功", e.data);
          //     setToken(e.data.token);
          //     this.$router.replace({
          //       path: "/",
          //       query: { user: this.loginform.username },
          //     });
          //   })
          //   .catch((err) => {
          //     this.$message.error(err);
          //   });
        }
      });
    },
  },
};
</script>

<style>
.login-container {
  min-height: 100%;
  width: 100%;
  background-color: #2d3a4b;
  overflow: hidden;
}

.login-container .login-form {
  position: relative;
  width: 520px;
  max-width: 100%;
  padding: 160px 35px 0;
  margin: 0 auto;
  overflow: hidden;
}

.login-container .title-container .title {
  font-size: 26px;
  color: #eee;
  margin: 0px auto 40px auto;
  text-align: center;
  font-weight: bold;
}
.login-container .el-form-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  color: #454545;
}
.login-container .el-input input {
  background: transparent;
  border: 0px;
  -webkit-appearance: none;
  border-radius: 0px;
  color: #fff;
  height: 47px;
  caret-color: #fff;
}
</style>